<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="javascript/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="javascript/laydate/need/laydate.css">
    <link rel="stylesheet" href="css/common.css">
    <script type="text/javascript" src="javascript/jquery.min.js"></script>
    <script src="javascript/bootstrap/js/bootstrap.min.js"></script>
    <script src="javascript/laydate/laydate.js"></script>
    <script src="javascript/bootstrap/js/dropdown.js"></script>
    <script src="javascript/DateUtils.js"></script>
    <script src="javascript/pagejs/card_record.js"></script>
    <style>

        .margin_cancel{
            padding-left: 0;
        }

        .label_tv {
            display: inline-block;
            line-height: 50px
        }
        .select_group{
            display: inline-block
        }

        .check_box {
            border: 1px solid gray;
            margin-left: 20px;
            padding: 20px 20px;
        }
        .inline{
            display: inline;
        }
        .time{
            width:40%;
        }
        .search_h{
            height: 50px;
        }
        .search_v{
            vertical-align:middle;
        }
    </style>
</head>
<body>
<!--刷卡记录-->
<div id="header">
    <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">刷卡记录</a>
                <span class="glyphicon glyphicon-floppy-save tv_icon"
                      title="导出列表数据"></span>

            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">广州xxx大学</a></li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
</div>
<div id="content">
    <div class="panel panel-default">
        <div class="panel-heading row">
            <div class="col-md-6 row text-left check_box">
                <!--<div class="row text-left" style="margin-left: 20px">筛选条件:</div>-->
                <div>
                    <div class="text-right label_tv">专业班级：</div>
                    <div class="btn-group select_group" id="select_group_1">
                        <div class="btn-group" id="ins">
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                全部学院
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu" role="menu">
                            </ul>
                        </div>
                        <div class="btn-group" id="major">
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                全部专业
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu" role="menu">
                            </ul>
                        </div>
                        <div class="btn-group" id="class">
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                全部班级
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu" role="menu">
                            </ul>
                        </div>
                        <div class="btn-group" id="grade">
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                全部年级
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">全部年级</a></li>
                                <li><a href="#">2015级</a></li>
                                <li><a href="#">2016级</a></li>
                                <li><a href="#">2017级</a></li>
                                <li><a href="#">2018级</a></li>
                                <li><a href="#">2019级</a></li>
                                <li><a href="#">2020级</a></li>
                                <li><a href="#">2021级</a></li>
                                <li><a href="#">2022级</a></li>
                                <li><a href="#">2023级</a></li>
                                <li><a href="#">2024级</a></li>
                                <li><a href="#">2025级</a></li>
                                <li><a href="#">2026级</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div >
                    <div class="text-right label_tv" id="time_area">刷卡时间：</div>
                    <!--<label for="startTime" class="col-sm-2 fl control-label">刷卡时间：</label>-->
                    <input class=" form-control time inline laydate-icon" id="startTime">
                    <span class="text-center line-height-34">至</span>
                    <input  class="time form-control inline laydate-icon" id="endTime">
                </div>
                <div class="col-md-6 text-left margin_cancel">
                    <div class="text-right label_tv">出 入 校 ：</div>
                    <div class="btn-group" id="in_out_type_area">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                            所有
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#">所有</a></li>
                            <li><a href="#">进校</a></li>
                            <li><a href="#">出校</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-6 text-left margin_cancel" >
                    <div class="text-right label_tv">出入状态：</div>
                    <div class="btn-group" id="except_type_area">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                            所有
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#">所有</a></li>
                            <li><a href="#">出入正常</a></li>
                            <li><a href="#">出入异常</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-10 text-left margin_cancel search_h" >
                    <div class="col-md-8 margin_cancel">
                        <input type="text" class="form-control" placeholder="请输入卡号或姓名" id="condition">
                    </div>
                    <button type="button" class="btn btn-default" id="search2">搜索</button>
                </div>
            </div>
            <!--<div class="col-md-3 text-center">-->

            <!--</div>-->
        </div>
    </div>
    <div class="panel-body">
        <table class="table table-bordered text-center">
            <thead class="text-center">
            <th>序号</th>
            <th>卡号</th>
            <th>学生姓名</th>
            <th>刷卡时间</th>
            <th>出入校</th>
            <th>备注</th>
            </thead>
            <tbody id="card_tbody">

            </tbody>
        </table>
    </div>
    <div class="panel-footer text-center">
        <nav>
            <ul class="pagination">
                <li><a href="#">&laquo;</a></li>
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li><a href="#">&raquo;</a></li>
                 <span style="line-height: 34px">共<strong id="pageCount">10</strong>页</span>
            </ul>
        </nav>
    </div>
</div>
</body>
</html>